<template>
  <div class="my_list">
      <el-card  :style="{background:item.isCheck?'pink':''}"   shadow="always" v-for="item in todolist" :key="item.id">
        <div class="cart_one">
          <el-checkbox size="large" :key="new Date()" @click="toSel(item.id)" :checked="item.isCheck"  />
          <span type="primary">{{item.text}}</span>
          <span class="close" @click="toSendId(item.id)">×</span>
        </div>
      </el-card>
      <!-- 随机愿望 -->
        <el-card  :style="{background:item.isCheck?'pink':''}"   shadow="always" v-for="item in arr" :key="item.id">
        <div class="cart_one">
          <el-checkbox size="large" :key="new Date()" @click="toSel(item.id)" :checked="item.isCheck"  />
          <span type="primary">{{item.text}}</span>
          <span class="close" @click="toSendId(item.id)">×</span>
        </div>
      </el-card>
  </div>
</template>
<script setup>
   import { defineProps ,defineEmits,watch,ref} from 'vue';
   import mitt from '../../utils/mitt'
  // vue3的父传子  在子组件中用defineProps 定义属性
  // 父组件通过 v-bind传参
     let props=defineProps({
        todolist:{
          type:Array,
          required:true, //必传属性
          default(){ //默认值
            return []
          }
        }
     })
    let arr=ref([]) //接受兄弟组件传来的愿望
    //  在js中使用 props 的数据
    console.log(props.todolist,"--------------")
    //  点击删除按钮  将id传给父组件
     let emit=defineEmits(["sendid",'selid']) 
    let toSendId=(id)=>{
       emit("sendid",id)
    }

    // 选中任务已完成
    let toSel=(id)=>{
      emit('selid',id)
    }

    // 监听兄弟组件 传来的数据
    mitt.on('sendtodo',(obj)=>{
      arr.value.push(obj)
    })



</script>
<style  scoped>
  .my_list{
      width: 800px;
    padding:20px 20px;
    box-sizing: border-box;
    
    
  }
  .el-card{
    margin-top:20px;
  }
  .cart_one{

    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .close{
    border: 1px solid black;
    border-radius: 50%;
    padding: 0 10px;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
  }
  .el-checkbox{
    width: 40px;
    height: 40px;
  }
</style>